<%--
  Created by IntelliJ IDEA.
  User: g.huangshg
  Date: 2016/12/12
  Time: 9:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
    String ws="ws://"+request.getServerName()+":" + request.getServerPort()+ path + "/";
%>
<html>
<head>
    <title>双攻通信</title>
    <base href="<%=basePath%>">
</head>
<link rel="stylesheet" type="text/css" href="resourse/plugins/font/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="resourse/plugins/font/css/default.css">
<link href="resourse/plugins/font/css/terminal.css" rel="stylesheet" />
<style>
    /* Demo CSS for the window, not needed for the basic terminal.js */
    #terminal-window{
        max-width: 1000px;
        margin: 1em auto;
        box-shadow: 0 12px 24px rgba(0,0,0,.66);
    }

    #terminal-window::before{
        content: "聊天室";
        color: #dfdbd2;
        font-weight: bold;
        font-size: 14px;

        padding-top: 6px;
        padding-left: 12px;

        max-width: 1000px;
        display: block;
        height: 22px;

        background-color: #3c3b37;
        background-image: linear-gradient(to bottom, #59574f, #3f3e3a);
        box-shadow: 0 1px 0 #58574e inset,
        0 2px 0 #626055 inset;

        border-radius: 6px 6px 0 0;
    }

    #terminal{
        padding: 2px;
        font-size: 17px;
    }
</style>
<body>
<input type="hidden"   id="sessionid" value="">
<input type="hidden"   id="ws" value="<%=ws%>">
<input type="hidden"   id="basePath" value="<%=basePath%>">

<div class="htmleaf-container">

    <div id="terminal-window" >
        <div id="terminal" >
            <div class="output" style="overflow-y: auto ;">
                <span class="line">欢迎进入聊天<br> </span>
            </div>
        </div>
    </div>
    <textarea  id="textarea" >
    </textarea>
        <button id="sendMsg">发送</button>
</div>
</body>
<script type="text/javascript" src="js/sockjs-0.3.4.js"></script>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script src="resourse/plugins/font/js/terminal.js"></script>
<script src="resourse/plugins/console/dist/screenlog.min.js"></script>
<script>
$(function(){
    $("#textarea").width($(window).width()*0.6);
    $("#textarea").height($(window).height()*0.3);
    var myOffset = new Object();
    myOffset.left = $("#terminal").offset().left;
    myOffset.top = $("#textarea").offset().top;
    $("#textarea").offset(myOffset);
    myOffset.left = $("#textarea").offset().left+$("#textarea").width()-45;
    myOffset.top = $("#textarea").offset().top+$("#textarea").height()-25;
    $("#sendMsg").offset(myOffset);
    $(window).resize(function(){
        $("#textarea").width($(window).width()*0.6);
        $("#textarea").height($(window).height()*0.3);
        myOffset.left = $("#textarea").offset().left+$("#textarea").width()-45;
        myOffset.top = $("#textarea").offset().top+$("#textarea").height()-25;
        $("#sendMsg").offset(myOffset);
    })
    screenLog.init();
    var i =0;
    var websocket;
    if ('WebSocket' in window) {
        websocket = new WebSocket($("#ws").val()+"webSocketServer");
    }/* else if ('MozWebSocket' in window) {
        websocket = new MozWebSocket($("#ws").val()+"webSocketServer");}*/
     else {
        websocket = new SockJS($("#basePath").val()+"sockjs/webSocketServer");
    }
    websocket.onopen = function (evnt) {
        screenLog.log('与websocket建立连接....');
    };
    websocket.onmessage = function (evnt) {
        var str=evnt.data;
        str=JSON.parse(str);
        if(str.type==1){
            screenLog.log(str.context);
            if(str.sessionId!="")
            $("#sessionid").val(str.sessionId);
        }
        else if(str.type==2){
            var span=$("<span data-terminal='line'  data-terminal-message=''  data-terminal-time='10'>");
            if(str.sessionId==$("#sessionid").val())  str.userName="";
            var context =str.userName+"  ("+str.time+") :  "+str.context;
            span.attr("data-terminal-message",context);
            runTerminalLine(span,$('#terminal'));
        }

    };
    websocket.onerror = function (evnt) {
        screenLog.log('与websocket连接错误....');
    };
    websocket.onclose = function (evnt) {
        screenLog.log('与websocket的连接关闭');
    }
$("#sendMsg").click(function(){
    websocket.send($("#textarea").val());
    $("#textarea").val("");
});
    //回车绑定
    $(document).keydown(function(event){
        if(event.keyCode == 13){  $("#sendMsg").click();  }
    });
    $("#textarea").focus();
});
</script>
</html>
